<template>
  <view class="webpage">
    <!-- 顶部图片区域 -->
    <view class="bg-img"></view>
    <!-- 前三区域 -->
    <view class="ranking">
      <view class="rank-second">
        <view>
          <h1>{{ three[1].name }}</h1>
          <view class="bag-top">{{ three[1].bagNumber }}袋</view>
        </view>
      </view>
      <view class="rank-frist">
        <view>
          <h1>{{ three[0].name }}</h1>
          <view class="bag-top">{{ three[0].bagNumber }}袋</view>
        </view>
      </view>
      <view class="rank-third">
        <view>
          <h1>{{ three[2].name }}</h1>
          <view class="bag-top">{{ three[2].bagNumber }}袋</view>
        </view>
      </view>
    </view>

    <!-- 列表区域 -->
    <view class="rank-list-margin">
      <view class="rank-list-padding"></view>
    </view>
    <!-- 排名内容 -->
    <view class="rankList">
      <!-- 前三 -->
      <view v-for="(item, index) in three" :key="index" class="flex items-center">
        <view class="rank w-[150rpx] text-center">
          <image :src="item.icon" class="w-4 h-4 rounded-fviewl" mode="widthFix" />
        </view>
        <view class="name flex-1">
          <view class="tou"></view>
          <p>{{ item.name }}</p>
        </view>
        <view class="bag w-[150rpx]">{{ item.bagNumber }}袋</view>
      </view>

      <!-- 第四以后 -->
      <view v-for="(item, index) in placardList" :key="index" class="flex items-center">
        <view class="rank w-[150rpx] text-center">
          {{ index + 4 }}
        </view>
        <view class="name flex-1">
          <view class="tou"></view>
          <p>{{ item.name }}</p>
        </view>
        <view class="bag w-[150rpx]">{{ item.bagNumber }}袋</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import http from "@/utils/http";
import jin from "@/assets/imgs/ranking1.png";
import yin from "@/assets/imgs/ranking2.png";
import tong from "@/assets/imgs/ranking3.png";
// 模拟数据
const three = ref([
  { id: 1, name: "张三", bagNumber: "100", icon: jin },
  { id: 2, name: "李四", bagNumber: "90", icon: yin },
  { id: 3, name: "王五", bagNumber: "89", icon: tong },
]);
const placardList = ref([
  { id: 4, name: "张三", bagNumber: "60" },
  { id: 5, name: "李四", bagNumber: "90" },
  { id: 6, name: "王五", bagNumber: "89" },
  { id: 7, name: "赵六", bagNumber: "80" },
]);

onMounted(() => {
  console.log("onMounted");
  getGoods();
});

function getGoods() {
  http.post("/index.php/index/api/index", {
    Func: "getRankingList",
    data: {
      top: 10
    }
  }).then((res) => {
    console.log("res", res);
    if(res?.error == 0) {
    }
  });
}
</script>

<style lang="scss">
.webpage {
  width: 100%;
  height: 100%;
  background-color: #eee;

  .bg-img {
    width: 750rpx;
    height: 500rpx;
    background-image: url("@/assets/imgs/webpage.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
  /* 自定义样式 */
  .ranking {
    width: 750px;
    height: 450px;
    margin-top: -150rpx;
    background-image: url("@/assets/imgs/qiansan.png");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
	padding: 0 50rpx;
	text-align: center;
    // justify-content: center;
    // align-items: center;
  }
  .rank-second {
    width: 220rpx;
	padding-top: 225rpx;
    
  }
  .rank-frist {
    width: 220rpx;
	padding-top: 180rpx;
    
  }
  .rank-third {
    width: 200rpx;
	padding-top: 255rpx;
    
  }
  .bag-top {
    padding-top: 20rpx;
	color: #71563e;
	font-size: 45rpx;
  }
  // 排名列表
  .rank-list-margin {
    margin: 0 auto;
    padding-top: 7.5rpx;
    width: 700rpx;
    height: 30rpx;
    background-color: #c2c0c6;
    border-radius: 15rpx 15rpx;
  }
  .rank-list-padding {
    margin: 0 auto;
    width: 680rpx;
    height: 15rpx;
    background-color: #eee;
    border-radius: 7.5rpx 7.5rpx;
  }
  .rankList {
    margin: -15rpx auto 0;
    padding-top: 15rpx;
    width: 660rpx;
    // height: 500rpx;
    background-color: #fff;
  }
  ul {
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
  }
  .rank {
    width: 150rpx;
  }
  .bag {
    width: 150rpx;
  }
  .name {
    display: flex;
    align-items: center;
	flex: 1;
	margin: 30rpx 0;
  }
  .tou {
    width: 50rpx;
    height: 50rpx;
    border-radius: 25rpx;
    background-color: aqua;
    margin-right: 15rpx;
  }
}
</style>
